<!DOCTYPE html>
<!--引入thymeleaf模板引擎-->
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head lang="en">
    <meta charset="utf-8"/>
    <title>个人信息</title>
    <link rel="stylesheet" type="text/css" href="/home/css/public.css"/>
    <link rel="stylesheet" type="text/css" href="/home/css/mygrxx.css"/>
    <style>
        .error { color: red; }
        .success { color: green; }
        .success::before { content: "\2713"; } /* Unicode for checkmark */
    </style>
    <script type="text/javascript" src="/home/js/jquery-3.5.1.js"></script>
    <script type="text/javascript">
        //旧密码校验
        function checkOldPwd() {
            var pwdObj = $("#oldPwd");
            var password = pwdObj.val();   //获取旧密码的值
            if (pwdObj.val().trim() !== "") {
                //3.验证旧密码是否正确--ajax
                $.ajax({
                    type: "post",
                    url: "/view/personal/checkOldPassword",
                    data: {"password": password, "user_id": $("#user_id").val()},
                    dataType: "json",
                    success: function (msg) {
                        if (!msg) {
                            pwdObj.next().addClass('error').text("原密码错误");
                        } else {
                            pwdObj.next().addClass('success').text("");
                        }
                    },
                    error: function (xhr, status, error) {
                        alert("网络不可用");
                    }
                });
            } else {
                pwdObj.next().addClass('error').text("原密码不能为空");
            }
        }

        //校验新密码
        function checkPwd() {
            var pwdObj = $("#newPwd");
            var password = pwdObj.val();   //获取密码的值
            var passwordZZ = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d).{6,16}$/;
            if (pwdObj.val().trim() !== "") {
                if (!passwordZZ.test(password)) {
                    pwdObj.next().addClass('error').text("密码格式错误");
                } else {
                    pwdObj.next().addClass('success').text("");
                }
            } else {
                pwdObj.next().addClass('error').text("新密码不能为空");
            }
        }

        //确认密码校验
        function checkRePwd() {
            var rePwdObj = $("#RePassword");
            var pwd = $("#newPwd").val();
            if (rePwdObj.val().trim() !== "") {
                if (pwd !== rePwdObj.val()) {
                    rePwdObj.next().addClass('error').text("两次密码不一致");
                } else {
                    rePwdObj.next().addClass('success').text("");
                }
            } else {
                rePwdObj.next().addClass('error').text("确认密码不能为空");
            }
        }

        //表单校验
        function checkForm() {
            checkOldPwd();
            checkPwd();
            checkRePwd();
            return $("#oldPwd").next().hasClass('success') &&
                $("#newPwd").next().hasClass('success') &&
                $("#RePassword").next().hasClass('success');
        }

        //使用ajax提交表单
        function updatePwd() {
            if (checkForm()) {
                $.ajax({
                    type: "post",
                    url: "/view/personal/editPassword",
                    data: {"password": $("#newPwd").val(), "user_id": $("#user_id").val()},
                    dataType: "json",
                    success: function (msg) {
                        if (msg) {
                            alert("密码修改成功，请重新登录");
                            window.location.replace("/login.html");
                        } else {
                            alert("密码修改失败，请刷新重试");
                        }
                    },
                    error: function (xhr, status, error) {
                        alert("网络不可用");
                    }
                });
            }
        }
    </script>
</head>
<body>
<!--引入顶部文件-->
<div th:replace="/home/header"></div>
<!--个人中心左侧菜单开始-->
<div class="address">
    <div class="wrapper clearfix">
        <a>当前位置：</a>
        <a href="http://localhost:8080/index.html"  style="">首页</a><span>></span>
        <a href="/view/personal/info" class="go">个人中心</a><span>></span>
        <a class="go">账号安全</a><span>></span>
        <a class="go">个人密码</a>
    </div>
</div>
<div class="Bott">
    <div class="wrapper clearfix" style="width: 1500px;margin-left: 160px;">
        <!--个人中心左侧菜单开始-->
        <div th:replace="/home/common/left_menu"></div>
        <!--个人中心左侧菜单结束-->
        <div class="you fl" style="min-height: 460px"><h2>修改密码</h2>
            <form method="post" class="remima">
                <input type="hidden" name="user_id" id="user_id" th:value="${session.user.getUser_id()}">
                <p> <span>原密码：</span><input type="password" id="oldPwd" required onblur="checkOldPwd()"/>  <span></span></p>
                <p class="op">请输入原始密码</p>
                <p><span>新密码：</span><input type="password" id="newPwd" name="password"   required onblur="checkPwd()"/><span></span></p>
                <p class="op">6-16位字符，必须包含大写字母、小写字母和数字，可以使用特殊字符（不能使用纯数字，纯字母）</p>
                <p><span>密码确认：</span><input type="password" id="RePassword" required onblur="checkRePwd()"/><span></span></p>
                <p class="op">请再次输入密码</p>
                <div style="margin-top: 30px">
                    <input type="button" value="取消" onclick="history.go(-1)"/>
                    <input type="button" style="margin-left: 30px;background: #FF6602FF;color: #fff" value="确认" onclick="updatePwd()"/>
                </div>
            </form>
        </div>
    </div>
</div>
<!--引入底部footer.html文件-->
<div th:replace="/home/footer"></div>
<script src="/home/js/public.js" type="text/javascript" charset="utf-8"></script>
<script src="/home/js/user.js" type="text/javascript" charset="utf-8"></script>
</body>
</html>